<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Car WebUI</title>
		<meta name="keywords" content="Car Control" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="description" content="wangheng.org 小车控制" />
		<meta name="author" content="wangheng" />

		<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">

		<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.11.2.min.js')}}"> </script>

	</head>
	<body>
		<div class="page">
			<header>
			<h1><a href="/">WebUI</a></h1>
			<div>
				项目地址：<a href="https://github.com/wujiwh/piCar">https://github.com/wujiwh/piCar</a>
			</div>
			</header>
			<div class="content">
				{% block body %}{% endblock %}
			</div>
			<center>
      <img src="http://192.168.1.6:8080/?action=stream" />
    </center>
			<!--
 			<canvas id="cav_dir" width="400" height="400" style="background-color: #eeeeee">
        		您的浏览器不支持。
        		</canvas>
        		 <span id="spn">hello</span>
 <script type="text/javascript">

        $(function() {
			var c=document.getElementById("cav_dir"); var 
			cxt=c.getContext("2d");
            
            var r = 200
 
            cxt.beginPath();
            cxt.fillStyle="rgba(0, 255, 0, 0.5)";
            cxt.arc(r, r, r, 0, Math.PI*2, false);
            cxt.closePath();
 
            cxt.lineWidth = 2
            cxt.strokeStyle = "rgba(255,0,0,0.5)";
            cxt.moveTo(0, r - 1)
            cxt.lineTo(2 * r, r - 1)
            cxt.moveTo(r - 1, 0)
            cxt.lineTo(r - 1, 2 * r)
            cxt.stroke()
 
            cxt.fill();
 
            function run(event) {
                event = event || window.event
                event.preventDefault()
		var box=document.getElementById('cav_dir');         // 获取元素

                var x = event.touches[0].clientX - r
                var y = event.touches[0].clientY - r-box.getBoundingClientRect().top
                var oInp = document.getElementById("spn");
                oInp.innerHTML = '(' + x + ',' + y + ')'
                //if (x * x + y * y < r * r) {
                    //$.post('/?x=' + x + '&y=' + y + '&r=' + r)		    
					$.post('/login', { x: x, y: y,r:r})
                //}
            }
 
            function stop(event) {
                event = event || window.event
                event.preventDefault()		
                //$.post('?x=0&y=0&r=' + r)
		var buf={ x: "0", y: "0",r:r }
                $.post('/login', buf)
            }
	    
	    function onclick(event) {
                event = event || window.event
                event.preventDefault()
                var x = event.clientX
                var y = event.clientY
                var oInp = document.getElementById("spn");
                oInp.innerHTML = '(' + x + ',' + y + ')'
                //if (x * x + y * y < r * r) {
                    //$.post('/?x=' + x + '&y=' + y + '&r=' + r)		    
		$.post('/login', { x: x, y: y,r:r})
                //}
            }
 
 
            c.addEventListener('touchstart',run, false);
            c.addEventListener('touchmove',run, false);
            c.addEventListener('touchend',stop, false);
	    c.addEventListener('click',onclick, false);
 
        })       
        </script>
	-->
			
		</div>
		<div id="left"></div>
        <div id="right"></div>
        <script src="../static/nipplejs.js"></script>
        <script>
            var joystickL = nipplejs.create({
                zone: document.getElementById('left'),
                mode: 'static',
                position: { left: '20%', top: '50%' },
                color: 'green',
                size: 200
            });
 
            var joystickR = nipplejs.create({
                zone: document.getElementById('right'),
                mode: 'static',
                position: { left: '80%', top: '50%' },
                color: 'red',
                size: 200
            });

            joystickL.on('start', function(evt, data) {
		   // $.post('/login', { x: data.frontPosition.x, y: data.frontPosition.y,r:100})
		    //console.log(evt)
    console.log(data.frontPosition)
  }).on('move', function(evt, data) {
	  //$.post('/login', { x: data.instance.frontPosition.x, y: data.instance.frontPosition.y,r:100})
	  $.post('/login', { x: data.distance, y: data.angle.degree,r:200})
    console.log(data.distance,data.angle.degree);
  }).on('end', function(evt, data) {
	  $.post('/ctl', { id:"t_stop"})
	  })/*.on('dir:up plain:up dir:left plain:left dir:down ' +
        'plain:down dir:right plain:right',
        function(evt, data) {
            console.log(evt.type);
  }
       ).on('pressure', function(evt, data) {
        console.log({
      pressure: data
    });
  });*/

 
        </script>
		
		<script type="text/javascript" src="{{ url_for('static', filename='car.common.js')}}"> </script>
		<script type="text/javascript" src="{{ url_for('static', filename='car.js')}}"> </script>
		<script>
			$(document).ready(function(){
				WH.Init();
			});
		</script>
	</body>
</html>
